<template>
  <div>
    <v-btn class="ma-2" fab small dark color="indigo" @click="open(-1)">
      <v-icon dark> mdi-plus </v-icon>
    </v-btn>
    <div class="text-center">
      <v-menu
        transition="fade-transition"
        v-for="(tag, index) in tags"
        :key="index"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-chip class="my-3 mx-3" v-bind="attrs" v-on="on">
            {{ tag.tagName }}
          </v-chip>
        </template>
        <v-list>
          <v-list-item @click="open(tag.id)">
            <v-list-item-title class="text-button">修改</v-list-item-title>
          </v-list-item>
          <v-list-item @click="deleteTagbyId(tag.id)">
            <v-list-item-title class="text-button">删除</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>

      <!-- 这里是消息提示框 -->
      <v-snackbar v-model="snackbar" timeout="3000" color="grey darken-3">
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>

      <!-- 弹出对话框啊 -->

      <v-dialog v-model="dialog" persistent max-width="300px">
        <v-card>
          <v-card-title>
            <span class="text-h5">输入标签名</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-col cols="12" sm="12" md="12">
                <v-text-field
                  label="标签名"
                  hint="误操作请点取消"
                  v-model="tagName"
                ></v-text-field>
              </v-col>
            </v-container>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" text @click="dialog = false">
              取消
            </v-btn>
            <v-btn color="blue darken-1" text @click="updateTag"> 提交 </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "TagManager",
  data() {
    return {
      tags: [],
      snackbar: false,
      text: "",
      dialog: false,
      tagName: "",
      updateId: -1,
    };
  },
  methods: {
    open(id) {
      this.dialog = true;
      this.updateId = id;
    },
    updateTag() {
      this.$axios
        .post("/tag/updateTag", {
          id: this.updateId,
          tagName: this.tagName,
        })
        .then((response) => {
          this.dialog = false;
          this.tagName = "";
          this.showTipMsg(response.data.msg);
          this.refeshTags();
        });
    },
    deleteTagbyId(id) {
      this.$axios.delete("/tag/deletetag/" + id).then((response) => {
        this.showTipMsg(response.data.msg);
        this.refeshTags();
      });
    },
    showTipMsg(msg) {
      this.text = msg;
      this.snackbar = true;
    },
    refeshTags() {
      this.$axios.get("/tag/alltag").then((response) => {
        this.tags = response.data.data;
      });
    },
  },
  mounted() {
    this.$axios.get("/tag/alltag").then((response) => {
      this.tags = response.data.data;
    });
  },
};
</script>

<style>
</style>